<template>
  <div>
    <ul>
      <li>
        <div class="flex">

          <input type="checkbox" :checked="todo_list.done" @change="Check(todo_list.id)">

          <span v-show="!todo_list.isEdit">{{ todo_list.title }}</span>

          <input type="text" :value="todo_list.title" ref="ipt" v-show="todo_list.isEdit"
            @blur="$_handlerBlur(todo_list, $event)">

        </div>
        <button class="btn1" v-show="!todo_list.isEdit" @click="$_handlerEdit(todo_list)">编辑</button>
        <button class="btn" @click="update(todo_list.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'ItemI',
  props: ['todo_list', 'Alldata'],
  methods: {
    update(id) {
      if (confirm('确定删除吗?')) {
        this.$bus.$emit('deleteTodo', id)
      }
    },
    Check(id) {
      this.$bus.$emit('checkedTodo', id)
    },
    // 点击编辑  给对象中添加属性
    $_handlerEdit(todo_list) {
      let arr = Object.keys(todo_list);
      arr.forEach(item => {
        if (item == 'isEdit') {
          todo_list.isEdit = true
        } else {
          this.$set(todo_list, 'isEdit', true)
        }
      })
      // 在下一次DOM更新结束后执行其指定的回调
      this.$nextTick(() => {
        this.$refs.ipt.focus()
      })
    },
    // input框失去焦点时 
    $_handlerBlur(todo_list, e) {
      todo_list.isEdit = false
      if (!e.target.value.trim()) return alert('内容不能为空')
      this.$bus.$emit('UpDateTodo', todo_list.id, e.target.value)
    }
  },
  // 与nextTick同理 在更新完数据后 调用函数
  // updated() {
  //   this.$refs.ipt.focus()
  // },
}
</script>

<style scoped>
ul {
  width: 600px;
}

ul li {
  height: 50px;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: all .5s;
  position: relative;
}

ul li:hover {
  background-color: #ccc;
}

.btn {
  width: 60px;
  height: 30px;
  background-color: tomato;
  border: 1px solid #ccc;
  transition: all .5s;
  color: white;
  display: none;
}

.btn1 {
  width: 60px;
  height: 30px;
  position: absolute;
  right: 85px;
  top: 50%;
  transform: translateY(-50%);
  background-color: skyblue;
  border: 1px solid skyblue;
  transition: all .5s;
  color: white;
  display: none;
}

ul li:hover .btn {
  display: block;
  transition: all .5s;

}

ul li:hover .btn1 {
  display: block;
  transition: all .5s;

}

.flex {
  display: flex;
  align-items: center;
}

.flex input {
  width: auto;
  margin-right: 15px;
}
</style>